<template>
	<view class="">
		<div class="homebj">
		    <div class="hdxqtop">
		        <div class="hdxqtopleft">
		            <img v-if="datas.typeImg != ''" :src="getImg1(datas.typeImg)" class="hdxqimg1">
		            <img v-if="datas.typeImg == ''" :src="getImg('noimg.png')" class="hdxqimg1">
		            <img :src="getImg('hdxqjxzicon.png')" class="hdxqimg2" v-if="datas.type == 0">
		            <img :src="getImg('hdxqjxz.png')" class="hdxqimg2" v-if="datas.type == 1">
		            <img :src="getImg('hdxqjxzactive.png')" class="hdxqimg2" v-if="datas.type == 2">
		        </div>
		        <div class="hdxqtopright">
		            <div class="hdxqdes"><span v-if="datas.type == 1">在线报名活动</span><span v-if="datas.type == 2">直接前往现场</span></div>
		            <div class="hdxqzbdwright dz" style="float: none;overflow: hidden;text-align: right;">
		                <span @click="getData2()"><img :src="getImg('hdxq_dcactive.png')"><span class="hdxqsc"><span v-if="datas.isLike == true">已点赞</span><span v-if="datas.isLike == false">未点赞</span>（{{datas.likeNum}}）</span></span>
		                <span @click="getData3()" class="hdxqzbdwrightmr"><img :src="getImg('hdxq_scactive.png')"><span class="hdxqsc"><span v-if="datas.isCollection == true">已收藏</span><span v-if="datas.isCollection == false">未收藏</span>（{{datas.collection}}）</span></span>
		             </div>
		        </div>
		    </div>
		    <div class="hdxqzbdw">
		        <div class="hdxqtitle">[{{datas.name}}]</div>
		        <div class="hdxqzbdwleft" style="float: none;width: 100%;">
		            <img :src="getImg('hdxq_zbdw.png')">
		            <span>主办单位：{{datas.unit}}</span>
		        </div>
		        
		        <div class="hdxqlist sj">
		            <img :src="getImg('hdxq_sj-1.png')" class="hdxqlistimg">
		            <div class="hdxqlistname">活动时间：{{datas.start_time}} ~ {{datas.end_time}}</div>
		        </div>
		        <div class="hdxqlist fzr">
		            <img :src="getImg('hdxq_fzr-1.png')" class="hdxqlistimg">
		            <div class="hdxqlistname">负责人：{{datas.header}}</div>
		        </div>
		        <div class="hdxqlist fzr">
		            <img :src="getImg('hdxq_fzr-1.png')" class="hdxqlistimg">
		            <div class="hdxqlistname">联系方式：{{datas.phone}}</div>
		        </div>
		        <div class="hdxqlist dz">
		            <img :src="getImg('hdxq_dz-1.png')" class="hdxqlistimg">
		            <div class="hdxqlistname">活动地址：{{datas.place}}</div>
		        </div>
		    </div>
		    <div class="hdbmall">
		        <div class="hdbmlist">
		            <div class="hdbmlisttop">
		                <img :src="getImg('xingming.png')" class="hdbmlistimg">
		                <div class="hdbmlistname">姓名</div>
		            </div>
		            <div class="hdbmlistbottom">
		                <input type="text" class="hdbmlistinput" v-model="name">
		            </div>
		        </div>
		        <div class="hdbmlist">
		            <div class="hdbmlisttop">
		                <img :src="getImg('xingbie.png')" class="hdbmlistimg">
		                <div class="hdbmlistname">性别</div>
		            </div>
		            <div class="hdbmlistbottom">
						<picker selector-type="select" :range="array" :value="index" @change="setSex">
							<view>{{array[index]}}</view>
						</picker>
		               <!-- <select class="hdbmlistselect" v-model="sex">
		                    <option value="true">男</option>
		                    <option value="false">女</option>
		                </select> -->
		            </div>
		        </div>
		        <div class="hdbmlist">
		            <div class="hdbmlisttop">
		                <img :src="getImg('shenfenzhenghao.png')" class="hdbmlistimg">
		                <div class="hdbmlistname">身份证号码</div>
		            </div>
		            <div class="hdbmlistbottom">
		                <input type="text" class="hdbmlistinput" v-model="cardNo">
		            </div>
		        </div>
		        <div class="hdbmlist" v-if="ways == 2 && datas.amount != 0">
		            <div class="hdbmlisttop">
		                <img :src="getImg('baomingfeiyong.png')" class="hdbmlistimg">
		                <div class="hdbmlistname">报名费用</div>
		            </div>
		            <div class="hdbmlistbottom">
		                <input :value="datas.amount+'元'" type="text" readonly class="hdbmlistinput">
		            </div>
		        </div>
		        <div class="hdbmlist">
		            <div class="hdbmlisttop">
		                <img :src="getImg('lianxidianhua.png')" class="hdbmlistimg">
		                <div class="hdbmlistname">联系电话</div>
		            </div>
		            <div class="hdbmlistbottom">
		                <input type="text" class="hdbmlistinput" v-model="phone">
		            </div>
		        </div>
		    </div>
		    <div class="hdbmall" v-if="isCard">
		        <div class="hdbmlist">
		            <div class="hdbmlisttop">
		                <img :src="getImg('shangchuanshenfenzheng.png')" class="hdbmlistimg">
		                <div class="hdbmlistname">上传身份证</div>
		            </div>
		            <div class="hdbmlistbottom">
		                <div class="mc_face1" @click="setSfz(1)">
		                    <img v-if="iconPath1!=''" :src="getImg1(iconPath1)"/>
		                </div>
		                <div class="scsfzname">身份证个人面</div>
		                <div class="mc_face2" @click="setSfz(2)">
		                    <img v-if="iconPath2!=''" :src="getImg1(iconPath2)" />
		                </div>
		                <div class="scsfzname">身份证国徽面</div>
		            </div>
		        </div>
		        <div class="hdbmlist active">
		            <div class="hdbmlisttop">
		                <img :src="getImg('paisheshili.png')" class="hdbmlistimg">
		                <div class="hdbmlistname">拍摄示例</div>
		            </div>
		            <div class="hdbmlistbottom">
		                <div class="bssllistall">
		                    <div class="bssllist">
		                        <img :src="getImg('pzbz.png')" class="bssllistimg">
		                        <div class="bssllistname">标准</div>
		                    </div>
		                    <div class="bssllist">
		                        <img :src="getImg('pzbkqs.png')" class="bssllistimg">
		                        <div class="bssllistname">边框缺失</div>
		                    </div>
		                    <div class="bssllist">
		                        <img :src="getImg('pzzpmh.png')" class="bssllistimg">
		                        <div class="bssllistname">照片模糊</div>
		                    </div>
		                    <div class="bssllist">
		                        <img :src="getImg('pzsgtq.png')" class="bssllistimg">
		                        <div class="bssllistname">闪光太强</div>
		                    </div>
		                </div>
		            </div>
		        </div>
		    </div>
		    <div class="hdbmsave" @click="saveData()">报名</div>
		</div>
	</view>
</template>

<script>
	import web from '../../components/utils/request.js';
	export default {
		data() {
			return {
				id: 0,
				iconPath1: '',
				datas1:[{id:0, type:0, title:"", txt:"", path:"", file:"", isEdit:true}],
				iconPath2: '',
				datas2:[{id:0, type:0, title:"", txt:"", path:"", file:"", isEdit:true}],
				name: '',//报名名称
				sex: true,//报名性别 true 男 false 女
				cardNo: '',//报名身份证
				phone: '',//报名人电话
				cardzImg: '',//报名身份证正面
				cardfImg: '',//报名身份证反面
				datas: {},
				isCard: false,//判断身份证是否必填 false是随意 true是必填
				isName: false,//判断名称是否必填  false是随意 true是必填
				isPhone: false,//判断电话是否必填  false是随意 true是必填
				ways: 1,//判断金额
				array:['男','女'],
				index:0
			}
		},
		onLoad(options) {
			this.id=options.id
		},
		onReady() {
			this.getData();
		},
		methods: {
			setSex(e){
				this.index=e.detail.value;
				if(this.index==0){
					this.sex=true;
				}else{
					this.sex=false;
				}
			},
			setSfz(ind){
				var that=this;
				uni.chooseImage({
				    success: (chooseImageRes) => {
						console.log(chooseImageRes)
				        const tempFilePaths = chooseImageRes.tempFilePaths;
				        uni.uploadFile({
				            url: 'https://ruianm.tour-ma.com/wx/imgUpload.jspx', //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
				            name: 'uploadFile',
				            formData: {
				                'wx': 'wx',
				            },
				            success: (uploadFileRes) => {
								var data=JSON.parse(uploadFileRes.data);
								uni.showToast({
									title: '上传中',
									icon:'loading',
									duration:5000
								});
								setTimeout(function(){
									if(ind==1){
										that.iconPath1=data.data
									}else{
										that.iconPath2=data.data
									}
									uni.hideToast();
								},5000)
				            }
				        });
				    }
				});
			},
			getImg(url) {
				return 'https://ruianm.tour-ma.com/r/cms/www/m/huodong/img/' + url;
			},
			getImg1(url) {
				return 'https://ruianm.tour-ma.com' + url;
			},
			getData(){
				var url = "/conferenceDetail.jspx";
				var arg = {id:this.id};
				var that = this;
				web.httpPost(that, url, arg, function(res) {
					that.datas = res.data.data;
					that.isCard = res.data.data.isCard;
					that.isName = res.data.data.isName;
					that.isPhone = res.data.data.isPhone;
					that.ways = res.data.data.ways;
				})
			},
			saveData(){
				if(this.isName == true) {
				    if(this.name == ''){
						uni.showToast({
							title: '姓名必填'
						});
				        return;
				    }
				}
				if(this.isPhone == true) {
				    if(this.phone == ''){
						uni.showToast({
							title: '电话必填'
						});
				        return;
				    }
				}
				if(this.isCard == true) {
				    if(this.cardNo == ''){
						uni.showToast({
							title: '身份证必填'
						});
				        return;
				    }
				}
				var url = "/signUp.jspx";
				var arg = {id:this.id,flag:1,name:this.name,sex:this.sex,cardNo: this.cardNo,phone:this.phone,cardzImg:this.iconPath1,cardfImg:this.iconPath2};
				var that = this;
				web.httpPost(that, url, arg, function(res) {
					// if(this.ways==2&&res.data.uuid!='null'){//付费报名
					
					//     window.location.href = "${base}/weChatMain.jspx?uuid=" + res.uuid;
					// }else{
					uni.navigateBack({
						delta:1
					})
					// }
				})
			}
		}
	}
</script>

<style>
	@import url("@/components/css/datascss.css");
</style>
